<template>
	<div>
		<div id="eg">
			<TextEllipsis :value="value" :line="line" :nowrap="nowrap"/>
		</div>
		<ApiTable :data="data" :bind="this"/>
		<CodeShow :code="code"/>
	</div>
</template>

<script>
	import ApiTable from './tools/ApiTable';
	import TextEllipsis from '@/components/TextEllipsis';
	export default{
		name:'TextEllipsisEG',
		components:{
			ApiTable,
			TextEllipsis
		},
		data(){
			return {
				value:'这是一段很长的文字,超出以后会自动省略,鼠标悬停时会提示全部内容!',
				line:1,
				nowrap:false,
				data:[
					{
						title:'属性',
						value:[
							{name:'value',info:'内容',type:'String',set:{type:'input',bind:'value'}},
							{name:'line',info:'文字最大行数',type:'Number',def:'1',set:{type:'number',bind:'line'}},
							{name:'nowrap',info:'是否不换行',type:'Boolean',def:'false',set:{bind:'nowrap'}}
						]
					},{
						title:'方法',
						type:true,
						value:[
							{name:'restLineHeight',info:'重新获取lineHeight,当改变内容的lineHeight时需要调用该方法!',type:''}
						]
					}
				]
			};
		},
		computed:{
			code(){
				return `
<template>
	<TextEllipsis :value="value" :line="line" :nowrap="nowrap"/>
</template>
<script>
	export default{
		data:function(){
			return {
				value:'${this.value}',
				line:${this.line},
				nowrap:${this.nowrap}
			};
		}
	};
</${'script'}>
`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	#eg{
		margin:20px;
		width:150px;
	}
</style>
